import React, { useEffect, useState } from 'react'
import request from "../../../untils/request"
import "../../../api/communityList"
import { useDispatch, useSelector } from 'react-redux'
import { SETCOMMUNITYLIST, ALLSTATE } from "../../../type/store.d"

import PlayList from '../../../component/PlayList'


export default function Car() {
  const dispatch = useDispatch()
  useEffect(() => {
    request.get("/api/list").then(res => {
      console.log(res.data.list, "123");
      dispatch({
        type: SETCOMMUNITYLIST,
        payload: res.data.list
      })
    })
  }, [])
  const listData = useSelector((state: ALLSTATE) => {
    return state.communityList
  })
  const { today, week, mount, quarter, annual, comprehensive, } = listData
  return (
    <div className='boxWrap'>

      {
        today?.length ? <PlayList title={"今日榜单"} socerData={today}></PlayList> : null
      }


      {
        week?.length ? <PlayList title={"本周榜单"} socerData={week}></PlayList> : null
      }

      {
        mount?.length ? <PlayList title={"6月榜单"} socerData={mount}></PlayList> : null
      }


      {
        quarter?.length ? <PlayList title={"第2季度榜单"} socerData={quarter}></PlayList> : null
      }


      {
        annual?.length ? <PlayList title={"2022榜单"} socerData={annual}></PlayList> : null
      }

      {
        comprehensive?.length ? <PlayList title={"综合"} socerData={comprehensive}></PlayList> : null
      }


    </div >
  )
}
